<!--
 * @Description:
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-02-08 17:09:23
 * @LastEditors: Please set LastEditors
 * @Reference:
-->
<template>
  <div class="components">
    <el-card>
      <template #header>
        <div class="el-card-header">普通按钮</div>
        <div class="el-card-header-tip">进行了主题色配置，其他未做改变</div>
      </template>
      <CcButton @click="chang"> 按钮 </CcButton>
      <CcButton type="text"> 按钮 </CcButton>
      <CcButton class="iconfont icon-xia" @click="() => {}"> 按钮 </CcButton>
      <Code><div v-html="code.code"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">禁用按钮</div>
      </template>
      <CcButton type="text" disabled> 按钮 </CcButton>
      <CcButton class="iconfont icon-xia" disabled> 按钮 </CcButton>
      <Code><div v-html="code.code1"></div></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">加载状态按钮</div>
      </template>
      <CcButton loading> 按钮 </CcButton>
      <Code><div v-html="code.code2"></div></Code>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import code from './code';
export default defineComponent({
  setup() {
    const state = reactive({
      code
    });
    const chang = () => {
      console.log(123);
    };
    return { ...toRefs(state), chang };
  }
});
</script>

<style scoped></style>
